<template>
	<modal :showModal='showModal'>
		<view class="auth_box" v-if='showModal'>
			<view class="auth_box_bg">
				<view class="auth_box_top">
					<text>完善资料后可体验更多功能</text>
					<!-- <image @click="auth_box_hide()" src="https://image.mlid.wanchuyun.com/img/202211281114490131169.png"
						mode=""></image> -->
				</view>
				<view class="auth_box_message">
					<view class="auth_box_avatarUrl">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar($event)">
							<image class="avatar" :src="avatarUrl" mode="" v-if="avatarUrl != ''"></image>
							<image class="avatar" src="https://image.mlid.wanchuyun.com/img/202211281116160151652.png"
								mode="" v-else></image>
							<image class="photo" src="https://image.mlid.wanchuyun.com/img/202211281116310157665.png"
								mode=""></image>
						</button>
					</view>
					<view class="auth_box_name">
						<text>昵称：</text>
						<input placeholder-style="color:#e1e1e1" type="nickname" class="weui-input" placeholder="请输入昵称"
							v-model="nick_name" />
					</view>
				</view>
				<view class="auth_box_detail">
					<text>99%+的用户使用选择微信头像和微信昵
						称，便于后续的一系列操作</text>
				</view>
				<view class="auth_box_btn" @tap="update_message()">
					立即完善
				</view>
			</view>
		</view>
	</modal>
</template>

<script>
	const app = getApp()
	import modal from '../modal/modal.vue';
	export default {
		name: "update-user-info",
		components: {
			modal
		},
		props: {
			showModal: Boolean,
		},
		data() {
			return {
				avatarUrl: '',
				nick_name: '',
			};
		},
		methods:{
			// 微信授权 更改头像 （更新）
			onChooseAvatar: function(e) {
				this.avatarUrl = e.detail.avatarUrl
				var tempFilePath = e.detail.avatarUrl
				//上传图片
				uni.uploadFile({
					method: "POST",
					name: 'file',
					url: app.globalData.hostUrl + '/api/upload?store_id=0',
					header: {
						"Authorization": uni.getStorageSync('token')
					},
					filePath: tempFilePath, //临时路径
					fileType: "file",
					success: res => {
						if (JSON.parse(res.data).code == 1) {
							this.avatarUrl = JSON.parse(res.data).data
						}
			
					}
				})
			},
			// 更新资料设置
			update_message: function() {
				if (this.avatarUrl == '') {
					uni.showToast({
						title: '头像不可为空',
						icon: 'none'
					})
					return
				}
				if (this.nick_name == '') {
					uni.showToast({
						title: '昵称不可为空',
						icon: 'none'
					})
					return
				}
			
				let that = this;
				app.globalRequest({
					api: app.getApi().user.updateMsg,
					data: {
						avatarUrl: that.avatarUrl,
						nickName: that.nick_name
					},
					method: 'post',
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						uni.showToast({
							title: '授权成功',
							icon: 'none'
						})
						that.$emit('close')
					}
				}).catch(err => {
			
				})
				that.nick_name = ''
				that.avatarUrl = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.auth_box {
		width: 100%;
		height: 100vh;

		.auth_box_bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80%;
			height: 620rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.auth_box_top {
				padding: 30rpx 0rpx;
				text-align: center;

				text {
					font-size: 32rpx;
					font-weight: bold;
					font-family: 'PingFang SC';

				}

				image {
					width: 35rpx;
					height: 35rpx;
					margin-left: 50rpx;
				}
			}

			.auth_box_message {
				width: 100%;

				.auth_box_avatarUrl {
					width: 50%;
					margin: 10rpx auto;
					position: relative;
					text-align: center;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
					}

					.photo {
						position: absolute;
						bottom: 10rpx;
						right: 80rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.auth_box_name {
				display: flex;
				align-items: center;
				width: 80%;
				margin: 20rpx auto 0;

				text {
					font-size: 28rpx;
				}

				input {
					width: 80%;
					font-size: 24rpx;
					border-bottom: 2rpx solid #CECDD6;
					text-indent: 10rpx;
					color: #18181A;
				}
			}

			.auth_box_detail {
				width: 80%;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: 30rpx auto;
				background-color: #F6F7FB;
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 40rpx;
			}

			.auth_box_btn {
				width: 80%;
				margin: 30rpx auto;
				background-color: #B38E65;
				border-radius: 40rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				padding: 20rpx 0;
				box-sizing: border-box;
				letter-spacing: 2rpx;
			}
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.avatar-wrapper {
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: rgba(0, 0, 0, 0);

		&::after {
			border: 0;
		}
	}
</style>